<template>
    <div style="margin: 30px;">
        <h1>todos</h1>
        <hr>
        <div>
            <input @keyup.enter="addTodo" placeholder="动弹一下...">
            <button @click="remove">删除</button>
        </div>
        <ol>
            <li v-for="todo in list" :key="todo.text">
                <label>
                    <input :checked="todo.done" @change="toggle(todo)" type="checkbox">
                    <span :class="{ done: todo.done }">{{ todo.text }}</span>    
                </label>
            </li>
        </ol>
    </div>
</template>

<script>
    // https://vuex.vuejs.org/zh/
    import { mapState } from 'vuex'
    import { mapMutations } from 'vuex'

    export default {
        name: "todos",
        components: {
            // HelloWorld
        },
        data: function () {
            return {};
        },
        props: {},
        computed: {
            // 映射store.state
            ...mapState({
                list: (state) => state.todo.list,
            }),
        },
        methods: {
            addTodo(e) {
                this.add(e.target.value)
                e.target.value = ''
            },
            // 映射store.mutations
            ...mapMutations({
                add: 'todo/add',
                remove: 'todo/remove',
                toggle: 'todo/toggle',
            }),
        },
    };
</script>

<style scoped>
    .done {
        text-decoration: line-through;
    }
</style>